<template>
  <el-card>
    <template #header>日志详情</template>
    <div v-if="loading">加载中...</div>
    <div v-else-if="!detail">未找到</div>
    <div v-else>
      <h2 style="margin:0 0 8px">{{ detail.title }}</h2>
      <div style="color:#666;margin-bottom:8px">
        日期：{{ detail.logDate }} · 创建时间：{{ detail.createTime }}
      </div>
      <div style="white-space:pre-wrap;line-height:1.6">{{ detail.content }}</div>
      <div style="margin-top:16px">
        <CommentsPanel mode="worklog" :related-id="detail.worklogId" />
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { api } from '@/utils/api'
import CommentsPanel from '@/components/CommentsPanel.vue'
const route = useRoute()
const loading = ref(false)
const detail = ref(null)
async function load(){
  loading.value = true
  try{
    const { id } = route.params
    detail.value = await api.get(`/worklog/get/${id}`)
  } finally { loading.value = false }
}
onMounted(load)
</script>
